<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/mall.css">
    <link rel="stylesheet" href="../css/zx.css">
    <link rel="stylesheet" href="../font/iconfont.css">
    <script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

</head>

<body>
    <div class="kong11"></div>
    <div id="mulu">
        <!-- 导航 -->
        <div id="cateHead">
            <p><span>首页 / 商城系统 / </span>商品管理</p>
            <p>商品管理</p>
        </div>
    </div>

    <div id="catemain">
        <div class="catequery">
            <p class="tiaojianp">查询条件</p>
            <div class="row">
                <div class="col-md-3">
                    <label>商品名称:
                        <input type="text" class=" grayborder" id="goodsname">
                    </label>
                </div>
                <div class="col-md-2 ">
                    <label>商品编码:
                        <input type="text" class="txtwidsaml  grayborder" id="goodscode">
                    </label>
                </div>
                <div class="col-md-2">
                    <label>商品分类:
                        <select name="" id="goodsfl" class="seclewidsaml grayborder">
                            <option value="全部">全部</option>
                            <option value="智能手环">智能手环</option>
                            <option value="智能称">智能称</option>
                            <option value="睡眠管理">睡眠管理</option>
                            <option value="营养健康">营养健康</option>
                            <option value="护理清洁">护理清洁</option>
                            <option value="智能手表">智能手表</option>
                            <option value="血压计">血压计</option>
                            <option value="运动户外">运动户外</option>
                        </select>
                    </label>
                </div>
                <div class="col-md-2">
                    <label>状态:
                        <select name="" id="goodszt" class="seclewidsaml grayborder">
                            <option value="全部">全部</option>
                            <option value="已上架">已上架</option>
                            <option value="已下架">已下架</option>
                        </select>
                    </label>
                </div>
                <div class="col-md-3 mybutn">
                    <button class="myczbutn">重置</button>
                    <button class="myqurbutn">查询</button>
                    <button class="myxjbutn" id="gaoji">高级筛选</button>
                </div>
            </div>
        </div>
        <div id="tdheight">
            <div class="catetablehead mybutn">
                <p class="tiaojianp">商品列表</p>
                <!-- <select name="" id="" class="seclewidsaml grayborder specright">
                    <option value="">批量操作</option>
                    <option value="">设为严选</option>
                    <option value="">取消严选</option>
                    <option value="">设为新品</option>
                    <option value="">取消新品</option>
                    <option value="">设为秒杀</option>
                    <option value="">取消秒杀</option>
                    <option value="">取消新品</option>
                    <option value="">商品上架</option>
                    <option value="">商品下架</option>
                </select> -->
                <button class="myxzbutn"><span class="iconfont icon-zengjia jiahao"></span> 新增</button>
                <button class="mydelbutn bigdel"><span class="iconfont icon-shanchu jiahao"></span>删除</button>
                <button class="mysjbutn">上架</button>
                <button class="myxjbutn">下架</button>
            </div>
            <table class="table">
                <thead>
                    <tr>
                        <th> <input type="checkbox" name="" id=""></th>
                        <th>商品ID</th>
                        <th>商品名称</th>
                        <th>商品图片</th>
                        <th>商品编码</th>
                        <th>商品价格</th>
                        <th>商品库存</th>
                        <th>商品状态</th>
                        <th>商品标题</th>
                        <th>商品分类</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="mytbody">
                </tbody>
            </table>
            <div id="pagebut">

            </div>
        </div>
    </div>
    <div id="motaikuang"></div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">
                        高级筛选
                    </h4>
                </div>
                <div class="modal-body">
                    <table>
                        <tr>
                            <td>商品分类</td>
                            <td>状态</td>
                        </tr>
                        <tr>
                            <td>
                                <select name="" id="orderl" class="grayborder">
                                    <option value="全部">全部</option>
                                    <option value="智能手环">智能手环</option>
                                    <option value="智能称">智能称</option>
                                    <option value="睡眠管理">睡眠管理</option>
                                    <option value="营养健康">营养健康</option>
                                    <option value="护理清洁">护理清洁</option>
                                    <option value="智能手表">智能手表</option>
                                    <option value="血压计">血压计</option>
                                    <option value="运动户外">运动户外</option>
                                </select>
                            </td>
                            <td>
                                <select name="" id="orders2" class="grayborder">
                                    <option value="全部">全部</option>
                                    <option value="已上架">已上架</option>
                                    <option value="已下架">已下架</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>商品名称</td>
                            <td>商品编号</td>
                        </tr>
                        <tr>
                            <td><input type="text" id="gname"></td>
                            <td><input type="text" id="gid"></td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="chongzhi">重置</button>
                    <button type="button" class="btn btn-primary " data-dismiss="modal" id="gaojichaxun">查询</button>
                </div>
            </div>
        </div>
    </div>

    <div>
        <span class="foot1">大健康综合管理后台</span>
        <span class="foot2">版权所有:@大健康综合(集团)有限公司Meinian Onehealth Healthcare (Group)Co.</span>
        <span class="foot2">沪ICP备09017846号-3沪公网安备31010602006448号</span>
    </div>

    <script src="../JavaScript/index.js"></script>
    <script src="../JavaScript/data.js"></script>
    <script src="../JavaScript/utils.js"></script>
    <script src="../JavaScript/mall.js"></script>
    <script>
        var querydata1 = []
        var querydata2 = []
        var catdnewdata = []

        var catdate = getmyData("goods")
        if (catdate == null) {
            setmyData("goods", categoryData)
            catdate = getmyData("goods")
        }
        cutdata(catdate, querydata1, 1, 8, 1)
        cutdata(catdate, querydata2, 10, 10, 1)
        comdata(querydata1, querydata2, catdnewdata)
        console.log(catdnewdata);
        showTable(9, catdnewdata)
        var sepc1
        var sepc2
        var sepc3
        function mysepcil() {
            sepc1 = document.querySelectorAll('#mytbody td:nth-of-type(1)')
            sepc2 = document.querySelectorAll('#mytbody td:last-of-type')
            $(sepc1).before(`<td><input type="checkbox" name="" class="check"></td>`)
            // $('td:nth-of-type(4)').html(`<td><img src="../images/goodsimg/小米手环4.jpg" alt=""></td>`)
            // console.log(sepc2.length);
            for (let o = 0; o < sepc2.length; o++) {
                $(sepc2[o]).after(`<td><button class='mybjbutn' data-bj='${o}'>编辑</button><button class='mydelbutn delbutn' data-biaoshi='${o}'>删除</button><button class="mylookpage" data-lookbut='${o}'>查看</button></td>`)
            }
            $(`td>button`).css({
                margin: '0 10px',
                backgroundColor: '#fff',
                color: 'rgba(24, 144, 255, 1)'
            })
            $(`td>img`).css({
                width: '100px'
            })
            checkfun()
            bjfun()
            delfun()
            mylook()
            mycheckarry = getmyData("mycheckarry")
            let mychecked = document.querySelectorAll('.check')
            console.log(mychecked);
            for (let l = 0; l < mychecked.length; l++) {
                for (let j = 0; j < mycheckarry.length; j++) {
                    console.log($(mychecked[l]).parent().parent().children(`td:nth-of-type(3)`).text());
                    if ($(mychecked[l]).parent().parent().children(`td:nth-of-type(3)`).text() == mycheckarry[j]) {
                        $(mychecked[l]).attr({ 'date-checked': 'true' })
                        $(mychecked[l]).attr("checked", true);
                    }

                }

            }

        }
        // 操作后的重新渲染
        function twoshow() {

            setmyData("goods", catdate)
            querydata1 = []
            querydata2 = []
            catdnewdata = []
            catdate = getmyData("goods")
            // console.log(catdate);
            cutdata(catdate, querydata1, 1, 8, 1)
            cutdata(catdate, querydata2, 10, 10, 1)
            comdata(querydata1, querydata2, catdnewdata)

            // console.log(catdnewdata);
            showTable(9, catdnewdata)

        }

        // 给重置按钮绑定函数，重新渲染
        $('.myczbutn').click(function () {
            showTable(9, catdnewdata)
        })
        // 给查询绑定函数,如果所有条件中的value是空的，点击按钮也不变
        // 查询需要的数组
        let txarry = []
        $('.myqurbutn').click(function () {

            // if ($('#goodsfl').val() != '全部' && $('#goodszt').val() != '全部' && $('#goodsname').val() != '') {
            console.log(123);
            for (let i = 0; i < catdnewdata.length; i++) {
                console.log(catdnewdata[i].categoryName);

                if (catdnewdata[i].goodsName == $('#goodsname').val() || (catdnewdata[i].goodsSid == $('#goodscode').val())) {
                    txarry.push(catdnewdata[i])
                    // console.log(catdnewdata);
                }
                if (catdnewdata[i].categoryName == $('#goodsfl').val() && $('#goodszt').val() == '全部') {
                    txarry.push(catdnewdata[i])
                }
                if (catdnewdata[i].categoryName == $('#goodsfl').val() && catdnewdata[i].goodsState == $('#goodszt').val()) {
                    txarry.push(catdnewdata[i])
                }
            }
            // console.log(txarry);
            showTable(9, txarry)
            txarry = []
            // }
        })
        // 高级筛选
        $("#gaoji").click(function () {
            $('#gaoji').attr('data-toggle', 'modal')
            $('#gaoji').attr('data-target', '#myModal')
        })

        $('#gaojichaxun').click(function () {
            let mydata1 = []
            for (let i = 0; i < catdnewdata.length; i++) {
                if (catdnewdata[i].goodsSid == $('#gid').val()) {
                    txarry.push(catdnewdata[i])
                }
                if (catdnewdata[i].goodsName == $('#gname').val()) {
                    txarry.push(catdnewdata[i])
                }

                if ((catdnewdata[i].categoryName == $('#orderl').val()) && (catdnewdata[i].goodsState == $('#orders2').val())) {
                    txarry.push(catdnewdata[i])
                    console.log('my1')
                }
                else if ((catdnewdata[i].categoryName == $('#orderl').val()) && $('#orders2').val() == '全部') {
                    txarry.push(catdnewdata[i])
                    console.log('my2')
                }
                else if ((catdnewdata[i].goodsState == $('#orders2').val()) && $('#orderl').val() == '全部') {
                    txarry.push(catdnewdata[i])
                    console.log('my3')
                }
            }
            console.log(txarry)
            showTable(9, txarry)
            txarry = []
        })
        $("#chongzhi").click(function () {
            showTable(9, catdnewdata)
            $('#orderl').val() = '全部'
            $('#orders2').val() = '全部'
        })
        // 新增需要的属性
        var xzsxarr = ['goodsSid', 'goodsName', 'categoryName', 'goodsTitle', 'goodsCode', 'goodsPrice', 'goodsInventory', 'goodsState', 'goodsImg']
        // 新增按钮绑定函数
        $('.myxzbutn').click(function () {
            $('#mulu #cateHead').css({
                display: 'none'
            })
            $('#mulu').append(`<div id="cateHead">
                            <p><span>首页 / 商城系统 /品类管理 / </span>添加商品</p>
                            <p>添加商品</p>
                        </div>`)
            showcatexzpage(9, 2, '.catexz', mycatexzarrylab, mycatexzarryspa)
            $('.catexz').after(`<div><button class="mybcbutnadd">保存</button><button class='myfhbutn'><a href="./goods.html">取消</a></button></div>`)

            $('.mybcbutnadd').click(function () {
                // 获取一个tr
                // console.log(newData[1]);
                let xzinput = document.querySelectorAll('.catexz input')

                for (let k = 0; k < xzinput.length; k++) {
                    catdate[1][`${xzsxarr[k]}`] = $(xzinput[k]).val()

                }

                // 往select里面添加opyion不能实现
                // let xgoption = document.querySelectorAll('#onecate option')
                // console.log($('#onecate:last-child'));
                // $('option:last-of-type').after(`<option value="123">123</option>`)
                twoshow()
                // location.href = "./category.html"
                $('#catemain .catequery').css({
                    display: 'block'
                })
                $('#catemain #tdheight').css({
                    display: 'block'
                })
                $('#catemain .xzmain').css({
                    display: 'none'
                })


            });
        })
        var mycatexzarrylab = ['商品ID：', '商品名称：', '商品分类', '商品标题', '商品编码', '商品价格', '商品库存', '商品状态', '缩略图'
        ]
        var mycatexzarryspa = [
            ' <input type="text" class="grayborder" placeholder="">',
            ' <input type="text" class="grayborder" placeholder="">',
            ' <input type="text" class="grayborder txtwidsaml" placeholder="">',
            ' <input type="text" class="grayborder" placeholder="">',
            ' <input type="text" class="grayborder" placeholder="">',
            ' <input type="text" class="grayborder" placeholder="">',
            ' <input type="text" class="grayborder" placeholder="">',
            ' <input type="text" class="grayborder" placeholder="">',
            '<textarea name="" id="" cols="30" rows="10"></textarea> '
        ]
        function showcatexzpage(trnum, tdnum, pardom, arrlab, arrspa) {
            $('#catemain .catequery').css({
                display: 'none'
            })
            $('#catemain #tdheight').css({
                display: 'none'
            })
            $('#catemain').append(`
                <div class="xzmain">
                    <table class="catexz">
                    </table>    
            </div>
            `)
            myxztable(trnum, tdnum, pardom, arrlab, arrspa)
        }
        // 用来生成table框架
        function myxztable(mytr, mytd, wz, myarrylab, myarryspa) {
            for (let m = 0; m < mytr; m++) {
                $(wz).append(`<tr class="myxztr"></tr>`)
                for (let n = 0; n < mytd; n++) {
                    if (n % 2 == 0 || n == 0) {
                        $(`.myxztr:nth-of-type(${m + 1})`).append(`<td class="myxztdone">${myarrylab[m]}</td>`)

                    } else {
                        $(`.myxztr:nth-of-type(${m + 1})`).append(`<td>${myarryspa[m]}</td>`)
                    }
                }
            }
        }
        // 下架按钮绑定函数
        $('.myxjbutn').click(function () {
            let xjgoods = []
            let mycheck = document.querySelectorAll('.check')
            for (let l = 0; l < mycheck.length; l++) {
                if ($(mycheck[l]).attr('date-checked') == 'true') {
                    console.log(catdate[l].goodsState);
                    catdate[l].goodsState = '已下架'
                    console.log(catdate[l].goodsState);
                    twoshow()
                }

            }
        })

        // 总体删除按钮绑定函数
        $('.bigdel').click(function () {
            let xjgoods = []
            let mycheck = document.querySelectorAll('.check')
            for (let l = 0; l < mycheck.length; l++) {
                // console.log(123);
                if ($(mycheck[l]).attr('date-checked') == 'true') {
                    console.log(123);
                    xjgoods.push($(mycheck[l]).parent().parent().children(`td:nth-of-type(3)`).text())
                    console.log(xjgoods);
                }

            }

            // 数组去重
            function unique(arr) {
                for (var i = 0; i < arr.length; i++) {
                    for (var j = i + 1; j < arr.length; j++) {
                        if (arr[i] == arr[j]) {         //第一个等同于第二个，splice方法删除第二个
                            arr.splice(j, 1);
                            j--;
                        }
                    }
                }
                return arr;
            }

            let xjgoodsarry = unique(xjgoods)
            console.log(xjgoodsarry);
            // 遍历每一个数组元素，如果newdata里面的categoryName，为数组里面的值，就删除这一项
            catdate.forEach((item, index) => {
                for (var i in catdate[index]) {
                    for (let a = 0; a < xjgoodsarry.length; a++) {
                        // console.log(data[index][`${zt}`]);
                        if (catdate[index].goodsName == xjgoodsarry[a]) {
                            catdate.splice(index, 1)

                        }
                    }

                }
            });


            let xgoption = document.querySelectorAll('#goodsfl option')
            for (let p = 0; p < xgoption.length; p++) {
                for (let q = 0; q < xjgoodsarry.length; q++) {
                    if ($(xgoption[p]).text() == xjgoodsarry[q]) {
                        xgoption[p].remove()
                    }
                }
            }
            twoshow()
        })

        // $('.bigdel').click(function () {
        //     let xjgoods = []
        //     let mycheck = document.querySelectorAll('.check')
        //     for (let l = 0; l < mycheck.length; l++) {
        //         if ($(mycheck[l]).attr('date-checked') == 'true') {
        //             catdate.splice(l, 1)
        //             // console.log(22);
        //         }
        //         // console.log(123);
        //     }
        //     twoshow()
        // })
        // 给删除按钮绑定函数
        function delfun() {
            sepc3 = document.querySelectorAll('#mytbody td:last-of-type')
            $(sepc3).on('click', '.delbutn', function () {
                let tdxb = parseInt($(this).attr('data-biaoshi'))
                $(sepc3[tdxb]).parent().remove()
                catdate.splice(tdxb, 1)
                twoshow()

                // 需要重新传到浏览器，并且名字一样
            })

        }

        // 上架按钮绑定函数
        $('.mysjbutn').click(function () {
            let xjgoods = []
            let mycheck = document.querySelectorAll('.check')
            for (let l = 0; l < mycheck.length; l++) {
                if ($(mycheck[l]).attr('date-checked') == 'true') {
                    console.log(catdate[l].goodsState);
                    catdate[l].goodsState = '已上架'
                    console.log(catdate[l].goodsState);
                    twoshow()
                }

            }

        })

        // 给查看按钮绑定函数
        function mylook() {
            $('.mylookpage').click(function () {
                let lookxb = parseInt($(this).attr('data-lookbut'))
                // 拿到对象的属性值
                let catevalue = []
                for (let n = 0; n < xzsxarr.length; n++) {
                    // 如果i与我的xzsxarr里面的元素匹配，才把catdnewdata[lookxb][i]push进去
                    console.log(i);
                    for (var i in catdnewdata[lookxb]) {
                        if (i == xzsxarr[n]) {
                            catevalue.push(catdnewdata[lookxb][i])
                        }
                    }
                }
                // let newcatevalue = catevalue.slice(0, 9);
                $('#mulu #cateHead').css({
                    display: 'none'
                })
                $('#mulu').append(`<div id="cateHead">
                            <p><span>首页 / 商城系统 /品类管理 / </span>查看商品</p>
                            <p>查看商品</p>
                        </div>`)
                showcatexzpage(9, 2, '.catexz', mycatexzarrylab, catevalue)
                $('.catexz').after(`<button class='gobackbtn'>返回</button>`)
                gobackbutn()

            })

        }
        // 返回按钮
        function gobackbutn() {
            $('.gobackbtn').click(function () {
                $('#catemain .xzmain').css({
                    display: 'none'
                })
                $('#catemain .catequery').css({
                    display: 'block'
                })
                $('#catemain #tdheight').css({
                    display: 'block'
                })
            })
        }
        // 编辑按钮
        let catevalue = []
        let catkey = []

        function bjfun() {
            $('.mybjbutn').click(function () {


                let bjxb = parseInt($(this).attr('data-bj'))
                // 拿到对象的属性值
                for (let n = 0; n < xzsxarr.length; n++) {
                    // console.log(xzsxarr);
                    // 如果i与我的xzsxarr里面的元素匹配，才把catdnewdata[lookxb][i]push进去
                    for (var i in catdnewdata[bjxb]) {
                        // console.log(i);
                        if (i == xzsxarr[n]) {
                            catevalue.push(catdnewdata[bjxb][i])
                            catkey.push(i)
                        }
                    }
                }

                showcatexzpage(9, 2, '.catexz', mycatexzarrylab, mycatexzarryspa)

                // 获得所有 text框，将需要编辑的数据渲染进来
                let xzinput = document.querySelectorAll('.catexz input')
                console.log(xzinput);
                for (let k = 0; k < xzinput.length; k++) {
                    // console.log(xzinput[k].value());
                    console.log(1234);
                    $(xzinput[k]).val(`${catevalue[k]}`)
                    // console.log(catevalue[k]);

                }
                $('.catexz').after(`<div><button class="mybcbutnxg">保存</button><button class='gobackbtn'>返回</button></div>`)
                // 保存按钮绑定函数
                gobackbutn()
                $('.mybcbutnxg').click(function () {
                    // 得到input框的值,并且将数值newdata里面对应的值改变，再次渲染)
                    // 每个input里面的值赋值给，对应属性的属性值
                    let xzinputbc = document.querySelectorAll('.catexz input')
                    catdate.forEach((item, index) => {
                        for (var i in catdate[index]) {
                            if (catdate[index].goodsName == catevalue[1]) {
                                for (let k = 0; k < xzinputbc.length; k++) {
                                    catdate[index][`${catkey[k]}`] = $(xzinputbc[k]).val()
                                }
                            }
                        }
                    });
                    catevalue = []
                    catkey = []
                    xzinput = []
                    twoshow()
                    $('#catemain .xzmain').remove()
                    $('#catemain .catequery').css({
                        display: 'block'
                    })
                    $('#catemain #tdheight').css({
                        display: 'block'
                    })

                })

            })


        }

    </script>

</body>

</html>